import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { $login, $getMine } from "../../apis/adminApi";
import { Button, Form, Input, Alert } from "antd";
// import "./login.scss";
import styles from "./login.module.scss";

import { useDispatch } from "react-redux";
import { adminSlice } from "../../redux/redux";

export default function Login() {
  const navigate = useNavigate();
  const [show, setShow] = useState(false);

  const dispatch = useDispatch();
  const { setAdmin } = adminSlice.actions;
  // 注册
  const register = () => {
    navigate("/register");
  };
  // 提交表单
  const onFinish = async (values) => {
    let { ok } = await $login(values);
    if (ok === 1) {
      sessionStorage.setItem("loginId", values.loginId);
      $getMine(values.loginId).then((r) => {
        dispatch(setAdmin(r[0]));
      });

      setShow(true);
      setTimeout(() => {
        navigate("/");
      }, 500);
    } else {
      alert("账号密码不匹配");
    }
  };

  const [form] = Form.useForm();

  return (
    <div className={styles.login}>
      <div className={styles.content}>
        <h2>酒店管理系统</h2>
        <Form
          form={form}
          name="basic"
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          initialValues={{
            loginId: "",
            loginPwd: "",
          }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="账号"
            name="loginId"
            value="jxx"
            rules={[
              {
                required: true,
                message: "请输入账号!",
              },
            ]}
          >
            <Input placeholder="jxx" />
          </Form.Item>

          <Form.Item
            label="密码"
            name="loginPwd"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
            ]}
          >
            <Input.Password placeholder="123" />
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 4,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit">
              登录
            </Button>

            <Button
              onClick={() => {
                form.resetFields();
              }}
              style={{ marginLeft: "10px" }}
            >
              取消
            </Button>
            <Button
              type="primary"
              style={{ float: "right" }}
              onClick={register}
            >
              注册账号
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div className={styles.notice}>
        {show ? (
          <Alert
            message="Success Tips"
            description="登录成功"
            type="success"
            showIcon
          />
        ) : (
          ""
        )}
      </div>
    </div>
  );
}
